<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>背景属性</title>
		<style>
			bod y{
				 width: 100%; 
				 height: 10000000px; 
				background-image: url(img/蜡笔小新1.png);
		        background-size: contain;
				/* 函数 cover    等比例放大图片  特点：原图按照比例放大存背景空间
				        【开发者：背景图大小是否按照背景空间】
				        contain 等比例放大图片  特点：图片按照比例缩放存背景空间
						【开发者：背景图等比例显示在背景图片】*/
				/* 背景附件---尺寸存在cover或者contain */
				 background-attachment: fixed;/* 背景图固定  scroll 不固定 */	 	 */ */
						 
			}
			
			div{
				width: 300px;
				height: 300px;
				background-color: #e4393c;
				background: #ffff00;
				background-image: url(img/蜡笔小新1.png);
				
				/* 问题：超大图-不显示 小图-显示
				 注意：背景空间大小，如果小于背景空间-平铺
				 */
				 background-repeat: no-repeat; 
				 /*no-repeat不平铺   repeat-x,y 横向平铺 */
			    background-size: 30%;
				/* 背景尺寸属性值：数值px % |函数 cover contain */
				/* 背景定位：前端背景空间大于背景图 关键字：center、left、 right、top...*/
				background-position: 80% 0;
			}
		</style>
	</head>
	<body>
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, corporis. Nobis, ad iure similique commodi enim culpa necessitatibus corrupti libero vero iste nesciunt delectus dignissimos expedita ab architecto nemo alias.
		Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique consequatur corporis impedit explicabo distinctio, provident harum sapiente cum fugit iure tempora quisquam, commodi, sed officiis expedita dignissimos velit excepturi totam.
		Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim ab itaque dolorem cumque, temporibus maiores. Reiciendis in excepturi nam unde assumenda reprehenderit, provident, non sapiente quae cum inventore vero nobis.
		<!--html  img图片  引入一张图片，位置不可随意改变
		   css    背景图片 引入一张图片，位置可以随意改变
		   子属性 background-color 背景颜色
		         background-image 背景图
				 background-repeat 背景重复
				 background-size  背景尺寸
				 background-attachment 背景附件
				 background-position   背景定位
		   复合属性 background:  background-image background-color background-position
		                        bakground-size  background-repeat和background-attachment
								
	        简写属性：background:  background-image background-color background-position| bakground-size  background-repeat								
			替代子属性 :background-image background-color background-repeat
		    -->
			<div></div>
	</body>
</html>